<template>
  <div class="user-info" id="user-info">
    <el-form v-if="user.id" :model="user" label-width="100px">
      <el-form-item label="头像：" style="display: flex;align-items: center;">
        <el-row>
          <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false" :http-request="afterRead"
            accept=".png,.jpg,.jpeg,.bmp">
            <el-avatar v-if="user.avatar" :src="user.avatar" shape="circle" :size="100" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload> 
        </el-row>
      </el-form-item>
      <el-form-item label="昵称：">
        <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
          <el-tooltip effect="dark" content="点击修改" placement="top" v-if="isNameEdit">
            <span style="cursor: pointer;" @click="isNameEdit = !isNameEdit">{{ user.nickname }}</span>
          </el-tooltip>
          <el-input v-else v-model="user['nickname']" />
          <el-button @click="save" size="small" :disabled="isNameEdit" v-show="!isNameEdit">{{ rawName != user.nickname
      ? '修改昵称' : '取消修改' }}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="账号：">
        <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
          <span>{{ user.username }}</span>
          <!-- <el-button @click="handelAccount" size="small">更换账号</el-button> -->
        </div>

        <!-- <el-tooltip
            class="box-item"
            effect="light"
            content="您已经是 VIP 会员"
            placement="right"
        >
          <el-image v-if="user.vip" :src="vipImg" style="height: 25px;margin-left: 10px"/>
        </el-tooltip> -->
      </el-form-item>
      <el-form-item label="密码：">

        <div style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
          <span>************</span>
          <el-button @click="handelPass" size="small">更换密码</el-button>
        </div>

      </el-form-item>
      <!-- <el-form-item label="剩余对话次数">
        <el-tag>{{ user['calls'] }}</el-tag>
      </el-form-item> -->
      <!-- <el-form-item label="剩余绘图次数">
        <el-tag>{{ user['img_calls'] }}</el-tag>
      </el-form-item> -->
      <!-- <el-form-item label="本月消耗电量">
        <el-tag type="info">{{ user['tokens'] }}</el-tag>
      </el-form-item> -->
      <!-- <el-form-item label="累计消耗电量">
        <el-tag type="info">{{ user['total_tokens'] }}</el-tag>
      </el-form-item> -->
      <!-- <el-form-item label="会员到期时间" v-if="user['expired_time'] > 0">
        <el-tag type="danger">{{ dateFormat(user['expired_time']) }}</el-tag>
      </el-form-item> -->

      <!-- <el-row class="opt-line">
        <el-button color="#47fff1" :dark="false" round @click="save">保存</el-button>
      </el-row> -->
    </el-form>
  </div>
</template>

<script setup>
import { onMounted, ref, watchEffect, unref, watch } from "vue"
import { httpGet, httpPost } from "@/utils/http";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import Compressor from "compressorjs";
import { dateFormat } from "@/utils/libs";
import { checkSession } from "@/action/session";
const props = defineProps(['user'])
const emit = defineEmits(['upDataPass', 'upDataAccount', 'save'])
const isNameEdit = ref(true)
const user = ref({
  vip: false,
  username: '',
  nickname: '',
  avatar: '',
  mobile: '',
  calls: 0,
  tokens: 0,
})
const rawName = ref('')
const vipImg = ref("/images/vip.png")

// watchEffect(() => {
//   user.value = props.user
//   rawName.value = props.user.nickname
//   console.log(props.user.nickname)
// })
watch(() => props.user, (n, o) => {
  user.value = n
  rawName.value = n.nickname
})
onMounted(() => {
  checkSession().then(() => {
    // 获取最新用户信息
    // httpGet('/api/user/profile').then(res => {
    //   user.value = res.data
    // }).catch(e => {
    //   ElMessage.error("获取用户信息失败：" + e.message)
    // });
  }).catch(e => {
    console.log(e)
  })
})
const handelPass = () => {
  emit('upDataPass')
}
const handelAccount = () => {
  emit('upDataAccount')
}

const afterRead = (file) => {
  // 压缩图片并上传
  new Compressor(file.file, {
    quality: 0.6,
    success(result) {
      const formData = new FormData();
      formData.append('file', result, result.name);
      // 执行上传操作
      httpPost('/api/upload', formData).then((res) => {
        user.value.avatar = res.data.url
        save('img')
        // ElMessage.success({ message: "上传成功", duration: 500 })

      }).catch((e) => {
        ElMessage.error('图片上传失败:' + e.message)
      })
    },
    error(err) {
      console.log(err.message);
    },
  });
};

const save = (msg) => {
  if (msg === 'img') {

  } else {
    if (rawName.value === user.value.nickname) {
      isNameEdit.value = !unref(isNameEdit)
      console.log('11111')
      return
    }
  }

  httpPost('/api/user/profile/update', user.value).then(() => {
    ElMessage.success({ message: '更新成功', duration: 500 })
  }).catch((e) => {
    ElMessage.error('更新失败：' + e.message)
  }).finally(() => {
    isNameEdit.value = true
    emit('save')
  });
}
</script>

<style lang="stylus" scoped>
.user-info {
  padding 20px
  box-sizing: border-box;
  .el-row {
    justify-content center
    margin-bottom 10px
  }

  .opt-line {
    padding-top 20px

    .el-button {
      width 100%
    }
  }
}
</style>